<template>
  <div class="settings-container">
    <h2>系统设置</h2>

    <!-- 模型设置 -->
    <div class="settings-section">
      <h3>模型设置</h3>
      <div class="form-group">
        <label for="modelPath">模型路径</label>
        <input 
          type="text" 
          id="modelPath" 
          v-model="settings.modelPath"
          placeholder="请输入模型文件路径"
        >
      </div>
      <div class="form-group">
        <label for="confidenceThreshold">置信度阈值</label>
        <input 
          type="number" 
          id="confidenceThreshold" 
          v-model="settings.confidenceThreshold"
          min="0"
          max="1"
          step="0.01"
        >
        <span class="help-text">设置预测结果的置信度阈值（0-1之间）</span>
      </div>
    </div>

    <!-- 系统参数 -->
    <div class="settings-section">
      <h3>系统参数</h3>
      <div class="form-group">
        <label for="maxFileSize">最大文件大小 (MB)</label>
        <input 
          type="number" 
          id="maxFileSize" 
          v-model="settings.maxFileSize"
          min="1"
        >
      </div>
      <div class="form-group">
        <label for="allowedTypes">允许的文件类型</label>
        <input 
          type="text" 
          id="allowedTypes" 
          v-model="settings.allowedTypes"
          placeholder="例如：jpg,png,jpeg"
        >
        <span class="help-text">用逗号分隔的文件类型</span>
      </div>
    </div>

    <!-- 存储设置 -->
    <div class="settings-section">
      <h3>存储设置</h3>
      <div class="form-group">
        <label for="storagePath">存储路径</label>
        <input 
          type="text" 
          id="storagePath" 
          v-model="settings.storagePath"
          placeholder="请输入文件存储路径"
        >
      </div>
      <div class="form-group">
        <label for="retentionDays">保留天数</label>
        <input 
          type="number" 
          id="retentionDays" 
          v-model="settings.retentionDays"
          min="1"
        >
        <span class="help-text">历史记录保留的天数</span>
      </div>
    </div>

    <!-- 保存按钮 -->
    <div class="actions">
      <button 
        class="save-btn"
        @click="saveSettings"
        :disabled="loading"
      >
        {{ loading ? '保存中...' : '保存设置' }}
      </button>
    </div>

    <!-- 提示信息 -->
    <div v-if="message" :class="['message', message.type]">
      {{ message.text }}
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const settings = ref({
  modelPath: '',
  confidenceThreshold: 0.5,
  maxFileSize: 10,
  allowedTypes: 'jpg,png,jpeg',
  storagePath: '',
  retentionDays: 30
})

const loading = ref(false)
const message = ref(null)

// 获取设置
const fetchSettings = async () => {
  try {
    const response = await fetch('/api/settings', {
      headers: {
        'Authorization': `Bearer ${localStorage.getItem('token')}`
      }
    })
    if (!response.ok) throw new Error('获取设置失败')
    const data = await response.json()
    settings.value = data
  } catch (error) {
    showMessage('获取设置失败', 'error')
  }
}

// 保存设置
const saveSettings = async () => {
  loading.value = true
  try {
    const response = await fetch('/api/settings', {
      method: 'PUT',
      headers: {
        'Authorization': `Bearer ${localStorage.getItem('token')}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(settings.value)
    })
    if (!response.ok) throw new Error('保存设置失败')
    showMessage('设置已保存', 'success')
  } catch (error) {
    showMessage('保存设置失败', 'error')
  } finally {
    loading.value = false
  }
}

// 显示消息
const showMessage = (text, type) => {
  message.value = { text, type }
  setTimeout(() => {
    message.value = null
  }, 3000)
}

onMounted(fetchSettings)
</script>

<style scoped>
.settings-container {
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
}

h2 {
  color: #2c3e50;
  margin-bottom: 2rem;
}

.settings-section {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 2rem;
}

h3 {
  color: #2c3e50;
  margin-bottom: 1.5rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  color: #666;
}

input {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

input:focus {
  outline: none;
  border-color: #42b983;
}

.help-text {
  display: block;
  margin-top: 0.5rem;
  color: #666;
  font-size: 0.875rem;
}

.actions {
  text-align: right;
}

.save-btn {
  padding: 0.8rem 2rem;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
}

.save-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.message {
  position: fixed;
  top: 2rem;
  right: 2rem;
  padding: 1rem 2rem;
  border-radius: 4px;
  color: white;
  animation: slideIn 0.3s ease-out;
}

.message.success {
  background-color: #4caf50;
}

.message.error {
  background-color: #f44336;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
</style> 